<body>
    <div style="background-color: pink;">
        静态定位static：是元素的默认定位方式，各个元素遵循着HTML文档流中默认的位置。
    </div>
    <div style="background-color: skyblue;">
        相对定位relative：表示它相对的参照物就是它在static状态下的位置，即以默认的位置为参照物进行位置的移动。不完全脱离标准文档流，覆盖在其他盒子之上，其他盒子依旧认为它在，保留它的空间。
    </div>
    <div style="background-color: yellow;">
        绝对定位absolute：使用最多的属性之一，表示它相对于其上一个已经定位的父元素进行定位。不设置宽度就没有宽度。完全脱离文档流，不占据位置，其他元素会占据此空间，即对象发生位移时，原先初始位置的内容如同被去除了一样，这个对象独立于其他页面的内容，而初始位置的空白被其他内容自然填补。
    </div>
    <div style="background-color: green;">
        固定定位fixed：元素固定于浏览器中的某个位置，使用场景：浏览器页面滚动时位置不会改变。如某些广告。
    </div>
</body>